<template>
  <div id="retained-analysis">
    <v-header ref="vHeader" title="留存分析" @on-save="saveComUse" :dataMsg="downloadData" :saveShow = "save" :showDownloadBtn="false"></v-header>
    <div class="box">
      <div class="box-con" v-show="toggleValue === 'index'">
        <div class="retention-conditions bg-color-white">
          <div class="tags-conditions">
            <!------常用 start------>
            <div class="tags">
              <v-pageHeader ref="pageHeader" @on-click="showList" :InquireTransCode="InquireTransCode"
                            :setTransCode="setTransCode"
                            :delTransCode="delTransCode" itemKey="anal_id" itemValue="anal_name"
                            num="09"></v-pageHeader>
            </div>
            <!------常用 end------>
            <!------用户分群 start------>
            <div class="conditions">
              <span class="font12">用户分群</span>
              <el-select class="width160" placeholder="请选择" v-model="userGroup" size="mini">
                <el-option label="请选择" value=""></el-option>
                <el-option
                  v-for="item in groupList"
                  :key="item.group_id"
                  :label="item.group_name"
                  :value="item.group_id">
                </el-option>
              </el-select>
            </div>
            <!------用户分群 end------>
          </div>
          <div class="time-screening">
            <!--初始事件 start-->
            <div>
              <span>初始事件</span>
              <el-select class="width160" v-model="w_list[0].event_id" placeholder="请选择" size="mini">
                <el-option
                  v-for="item in event_list"
                  :key="item.event_id"
                  :label="item.event_name"
                  :value="item.event_id">
                </el-option>
              </el-select>
                <i class="iconfont icon-add" @click="showoptionsone"></i>
            </div>
            <div v-for="(item, ind) in w_list[0].cond_groups" :key="item.key" class="clear" v-show="showselectone">
              <span class="lf"></span>
              <el-select class="width160 lf" v-model="item.meta_id" placeholder="请选择"
                         @change="changeEvents(item)" filterable size="mini" >
                <el-option
                  v-for="val in cond_arr3"
                  :key="val.key"
                  :label="val.colume_chs"
                  :value="val.meta_id">
                </el-option>
              </el-select>
              <el-select class="width100 lf" v-model="item.vs_code_value" placeholder="请选择"
                         @change="changeAttr(item)" size="mini">
                <el-option
                  v-for="val in cond_arr4"
                  :key="val.code_value"
                  :label="val.code_value_nm_cns"
                  :value="val.code_value">
                </el-option>
              </el-select>
              <el-input v-if="getBool_1(item)" class="lf width100" v-model="item.cond_value[0]" size="mini"></el-input>
              <div class="date-time lf" v-if="getBool_2(item)">
                <span>在</span>
                <el-date-picker
                  size="mini"
                  class="width270"
                  v-model="item.vs_date_value"
                  type="daterange"
                  align="right"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  @change="change(item)">
                </el-date-picker>
                <span>之间</span>
              </div>
              <div class="amount-range lf" v-if="getBool_3(item)">
                <span>在</span>
                <el-input class="width160" v-model="item.cond_value[0]" placeholder="输入内容" size="mini"></el-input>
                <span>和</span>
                <el-input class="width160" v-model="item.cond_value[1]" placeholder="输入内容" size="mini"></el-input>
                <span>之间</span>
              </div>
              <v-selectCheckbox v-if="getBool_4(item)" class="address-list lf" :options="countryList"
                                :closable="true"></v-selectCheckbox>
              <div class="icons-list lf">
                <i class="iconfont icon-add" @click="add_event(ind, 0)"></i>
                <i class="iconfont icon-close" v-if="w_list[0].cond_groups.length > 1" @click="remove_event(ind, 0)"></i>
              </div>
            </div>
            <!--初始事件 end-->
            <!--后续事件 start-->
            <div>
              <span>后续事件</span>
              <el-select class="width160" v-model="w_list[1].event_id" placeholder="请选择" size="mini">
                <el-option
                  v-for="item in event_list"
                  :key="item.event_id"
                  :label="item.event_name"
                  :value="item.event_id">
                </el-option>
              </el-select>
               <i class="iconfont icon-add" @click="showoptionstwo"></i>
            </div>
            <div v-for="(item, ind) in w_list[1].cond_groups" :key="item.key" class="clear" v-show="showselecttwo">
              <span class="lf"></span>
              <el-select class="width160 lf" v-model="item.meta_id" placeholder="请选择"
                         @change="changeEvents(item)" filterable size="mini">
                <el-option
                  v-for="val in cond_arr3"
                  :key="val.key"
                  :label="val.colume_chs"
                  :value="val.meta_id">
                </el-option>
              </el-select>
              <el-select class="width100 lf" v-model="item.vs_code_value" placeholder="请选择"
                         @change="changeAttr(item)" size="mini">
                <el-option
                  v-for="val in cond_arr4"
                  :key="val.key"
                  :label="val.code_value_nm_cns"
                  :value="val.code_value">
                </el-option>
              </el-select>
              <el-input v-if="getBool_1(item)" class="lf width100" v-model="item.cond_value[0]" size="mini"></el-input>
              <div class="date-time lf" v-if="getBool_2(item)">
                <span>在</span>
                <el-date-picker
                  size="mini"
                  class="width270"
                  v-model="item.vs_date_value"
                  type="daterange"
                  align="right"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  @change="change(item)">
                </el-date-picker>
                <span>之间</span>
              </div>
              <div class="amount-range lf" v-if="getBool_3(item)">
                <span>在</span>
                <el-input class="width160" v-model="item.cond_value[0]" placeholder="输入内容" size="mini"></el-input>
                <span>和</span>
                <el-input class="width160" v-model="item.cond_value[1]" placeholder="输入内容" size="mini"></el-input>
                <span>之间</span>
              </div>
              <v-selectCheckbox v-if="getBool_4(item)" class="address-list lf" :options="countryList"
                                :closable="true"></v-selectCheckbox>
              <div class="icons-list lf">
                <i class="iconfont icon-add" @click="add_event(ind, 1)"></i>
                <i class="iconfont icon-close" v-if="w_list[1].cond_groups.length > 1" @click="remove_event(ind, 1)"></i>
              </div>
            </div>
          </div>
          <!--筛选条件 start-->
          <div class="filter-conditions  bg-color-white font12">
            <div class="conditions-list">
              <div v-if="conditionList.length >= 2" class="group-btn" @click="toggle">
                <v-button :width="30" :btnText="groupBtnVal.code_value_nm_cns"></v-button>
              </div>
              <div class="condition-group-list" v-for="(group, index) in conditionList" :key="group.key">
                <div class="group-head" v-if="index !== 0"></div>
                <div class="condition-group" v-for="(item, ind) in group.cond_groups" :key="item.key">
                  <div class="item-btn" v-if="ind !== 0">
                    <v-button :width="30" @on-click="toggleRelationship(item)"
                              :btnText="item.vs_bool_code_value === 'and' ? '且' : '或'"></v-button>
                  </div>
                  <div class="condition-group-item">
                    <el-select v-model="item.meta_id" class="width160 lf" placeholder="请选择"
                               @change="changeEvent(item)" filterable size="mini">
                      <el-option
                        v-for="val in cond_arr1"
                        :key="val.key"
                        :label="val.colume_chs"
                        :value="val.meta_id">
                      </el-option>
                    </el-select>
                    <el-select v-model="item.vs_code_value" class="width100 lf" placeholder="请选择"
                               @change="changeAttr(item)" filterable size="mini">
                      <el-option
                        v-for="val in cond_arr2"
                        :key="val.key"
                        :label="val.code_value_nm_cns"
                        :value="val.code_value">
                      </el-option>
                    </el-select>
                    <el-input v-if="getBool_1(item)" class="lf" v-model="item.cond_value[0]" size="mini"></el-input>
                    <div class="date-time lf" v-if="getBool_2(item)">
                      <span>在</span>
                      <el-date-picker
                        size="mini"
                        class="width270"
                        v-model="item.vs_date_value"
                        type="daterange"
                        align="right"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        @change="change(item)">
                      </el-date-picker>
                      <span>之间</span>
                    </div>
                    <div class="amount-range lf" v-if="getBool_3(item)">
                      <span>在</span>
                      <el-input class="width160" v-model="item.cond_value[0]" placeholder="输入内容" size="mini"></el-input>
                      <span>和</span>
                      <el-input class="width160" v-model="item.cond_value[1]" placeholder="输入内容" size="mini"></el-input>
                      <span>之间</span>
                    </div>
                    <v-selectCheckbox v-if="getBool_4(item)" class="address-list lf" :options="countryList"
                                      :closable="true"></v-selectCheckbox>
                    <div class="icons-list lf">
                      <i class="iconfont icon-close" @click="remove_cond(index, ind)"></i>
                      <i class="iconfont icon-add" @click="addRow(group, ind)"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="add-condition">
              <el-button type="primary" plain icon="el-icon-plus" @click="addCondition"></el-button>
              <span>筛选条件</span>
            </div>
            <div class="examine">
              <div class="btns rf">
                <el-button type="primary" size="mini" @click="search">查看</el-button>
                <el-button size="mini" @click="cancelEven">重置</el-button>
              </div>
            </div>
          </div>
          <!--筛选条件 end-->
        </div>
        <div class="all-users bg-color-white">
          <div class="conditions">
          <range-date-picker class="timewidth210 height30" ref="toolBar" :defaultDate="dates" @date-change="getDate"></range-date-picker>
            <!-- <el-date-picker
              size="mini"
              v-model="dates"
              type="daterange"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="getDate"
              :picker-options="disableDate">
            </el-date-picker> -->
          </div>
          <div>
            <!--echarts 图形容器-->
            <div class="barEcharts">
              <chart :options="option" v-if="this.option.series.length > 0"></chart>
              <VNoData v-else></VNoData>
            </div>
            <!--显示table列表-->
            <div class="initial-user bg-color-white" v-if="tflag">
              <table class="table-rows" width="100%">
                <thead>
                <tr>
                  <th>日期</th>
                  <th>初始用户人数</th>
                  <th v-for="(item, index) in tableDataUser" :key="item.id">
                    {{ index + 1 }} 天后
                  </th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="items in tableData" :key="items.id">
                  <td>{{ items.by_value }}</td>
                  <td>{{ items.total_people }}</td>
                  <td v-for="(item, index) in items.cells" :key="item.id" @click="goUserList(items, index)">
                    <span class="blue-color">{{ item.people }}人</span>
                    <el-progress :stroke-width="4" :percentage="parseFloat(item.percent)"></el-progress>
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
      <!-- 用户列表 -->
      <div v-show="toggleValue === 'userList'" class="userList">
        <user-list ref="userList" @on-goBack="Back" :selectStranCode="selectStranCode"
                   pageName="userDetail"></user-list>
      </div>
      <!-- 用户详情 -->
      <div v-if="toggleValue === 'userDetail'" class="userDetail">
        <user-detail pageName="userList"></user-detail>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import {VInput, VButton, VHeader, VPageHeader, VNumberSelect, RangeDatePicker} from '../../../../components'
  import api from '../../../../api/url'
  import ajax from '../../../../api/ajax/ajax'
  import Msg from '../../../../assets/js/msg'
  import {getDateTime, dateFormat} from '../../../../assets/js'
  import userList from '../../../../view/comm/userList.vue'
  import userDetail from '../../../../view/comm/userDetail'
  import store from '../../../../store'
  import VNoData from '../../../../components/VNoData/VNoData'

  export default {
    components: {
      VInput,
      VButton,
      VHeader,
      VPageHeader,
      VNumberSelect,
      userList,
      userDetail,
      VNoData,
      RangeDatePicker
    },
    data () {
      return {
        save: true,
        downloadData: [], // 保存要下载的数据
        w_list: [
          {
            event_id: '',
            cond_groups: [
              {
                meta_id: '',
                cond_fmt: '',
                cond_value: []
              }
            ]
          },
          {
            event_id: '',
            cond_groups: [
              {
                meta_id: '',
                cond_fmt: '',
                cond_value: []
              }
            ]
          }
        ],
        InquireTransCode: api.SELECTBAARCHANALLIST, // 查询
        setTransCode: api.SETTINGBAARCHANALFORTOP, // 设置 / 取消置顶
        delTransCode: api.DELETEBAARCHANAL, // 删除常用
        groupList: [], // 用户分群列表
        userGroup: '', // 用户分群的值
        analyse_type: '09',
        event_list: [],
        groupVal: [ // 分组返回的列表，作为参数传到后台
          {
            meta_id: ''
          }
        ],
        eventList: [ // 进行操作后的事件列表， 作为参数传到后台
          {
            meta_id: '',
            cond_value: [],
            cond_link: 'B010006#AND',
            cond_fmt: 'B010003#01',
            disp_serial: '0',
            vs_event_name: '',
            vs_isSelect: true,
            vs_radio: 0,
            vs_list: [],
            vs_colume_chs: '',
            vs_event_meta_id: ''
          }
        ],
        conditionList: [], // 筛选条件返回的list
        cond_arr1: null, // 条件筛选的第一框
        cond_arr2: null, // 条件筛选的第二框
        cond_arr3: null, // 条件筛选的第一框
        cond_arr4: null, // 条件筛选的第二框
        groupBtnVal: null, // 条件筛选，第三方变量，最外层 且 / 或 的值
        from_date: '',
        to_date: '',
        dates: [],
        tflag: false,
        showselectone: false,
        showselecttwo: false,
        options: [],
        tableData: [], // echarts和表格数据
        tableDataUser: [], // 表格数据用户人数
        selectStranCode: api.SELECTANALYSEEVENTLIST, // 用户时间列表查询
        option: {
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: []
          },
          grid: {
            top: '25%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: { // 横坐标
            type: 'category',
            boundaryGap: false,
            data: [] // 第几天后
          },
          yAxis: {
            type: 'value'
          },
          series: []
        },
        disableDate: { // 禁用当前日期之后的日期
          disabledDate (time) {
            return time.getTime() > (new Date().getTime())
          }
        }
      }
    },
    computed: {
      // 'index' 显示主页，'userList' 显示用户列表，'userDetail' 显示用户详情
      toggleValue: () => {
        return store.state.toggleValue
      }
    },
    methods: {
      showoptionsone () {
        this.showselectone = true
      },
      showoptionstwo () {
        this.showselecttwo = true
      },
      Back () {
        store.commit('updateToggleValue', 'index')
        this.save = true
      },
      // 根据当前天数(date) 加第几天(days)
      addDate (date, days) {
        let dates = [dateFormat(date)]
        let d = new Date(dates)
        d.setDate(d.getDate() + days)
        let s = getDateTime(d, 's')
        let dd = s.substring(0, 8)
        return dd
      },
      goUserList (obj, index) {
        const paramsData = {
          message: {
            analyse_type: this.analyse_type,
            user_group: this.userGroup, // 用户分群
            start_event: this.w_list[0], // 初始事件
            end_event: this.w_list[1], // 后续事件
            w_list: this.conditionList, // 事件筛选
            from_date: this.from_date,
            to_date: this.to_date
          },
          reqjson: {
            from_date: obj.by_value,
            to_date: this.addDate(obj.by_value, index + 1)
          }
        }
        sessionStorage.setItem('from_date', this.from_date)
        sessionStorage.setItem('to_date', this.to_date)
        sessionStorage.setItem('paramsData', JSON.stringify(paramsData))
        ajax.post(api.SELECTANALYSEUSEROBJECTLIST, paramsData).then(res => {
          store.commit('updateToggleValue', 'userList')
          this.save = false
          this.userList = res.data
          this.$refs.userList.getUserList(this.userList)
        })
      },
      // 点击常用反显数据
      showList (obj) {
        ajax.post(api.SELECTBAARCHANAL,
          {
            anal_id: obj.anal_id
          }
        ).then(res => {
          // 数据反显在输入框 下拉框
          let data = JSON.parse(res.data.message_content)
          this.userGroup = data.user_group // 用户分群
          this.w_list[0] = data.start_event // 初始事件
          this.w_list[1] = data.end_event // 后续事件
          // this.groupVal = data.g_list // 分组
          this.conditionList = data.w_list // 筛选条件
          // 获取时间格式化 再添加到时间选择框里面
          this.from_date = data.from_date
          this.to_date = data.to_date
          let dateArr = [dateFormat(this.from_date), dateFormat(this.to_date)]
          dateArr.forEach((item, index) => {
            this.dates.splice(index, 1, item)
          })
        })
      },
      // 时间反显格式化
      // setTime (s) {
      //   let dateList = []
      //   let arr = s.replace(/^(\d{8})(\d{6})$/, '$1').replace(/^(\d{4})(\d{2})(\d{2})$/, '$1,$2,$3').split(',')
      //   dateList.push(new Date(new Date().setFullYear(Number(arr[0]), Number(arr[1]) - 1, Number(arr[2]))))
      //   return dateList
      // },
      saveComUse (obj) { // 点击保存为常用
        if (!this.w_list[0].event_id) {
          Msg.alert('请选择初始事件')
          return
        } else if (!this.w_list[1].event_id) {
          Msg.alert('请选择后续事件')
          return
        } else if (!this.from_date || !this.to_date) {
          Msg.alert('请选择日期')
          return
        }
        // 保存页面输入的内容
        let paramsData = {
          user_group: this.userGroup, // 用户分群
          start_event: this.w_list[0], // 初始事件
          end_event: this.w_list[1], // 后续事件
          // g_list: this.groupVal, // 分组
          w_list: this.conditionList, // 事件筛选
          from_date: this.from_date,
          to_date: this.to_date
        }
        // 调用 保存为常用接口
        ajax.post(api.SAVEASCOMMON,
          {
            anal_name: obj.pageHeaderName,
            anal_type: this.analyse_type,
            is_top: obj.isTop,
            message_content: JSON.stringify(paramsData)
          }
        ).then(res => {
          Msg.alert('保存成功')
          ajax.post(this.InquireTransCode, {anal_type: this.analyse_type}).then(res => {
            this.$refs.pageHeader.getList(res.data)
            this.$refs.vHeader.reset()
          })
        })
      },
      // 添加筛选条件
      addCondition () {
       if (this.conditionList.length < 3) {
         let itemData = {
           vs_data_type: '',
           vs_code: '',
           vs_code_value: '',
           vs_bool_code: '',
           vs_bool_code_value: '',
           meta_id: null,
           disp_serial: null,
           cond_link: '',
           cond_fmt: '',
           cond_value: []
         }
         let groupData = {
           vs_bool_code: '',
           disp_serial: null,
           cond_link: null,
           elem_type: 'W',
           cond_groups: []
         }
         let count = this.conditionList.length
         this.cond_arr1 = this.data.META_COLUME
         this.conditionList.splice(this.conditionList.length, 0, groupData)
         this.conditionList[count].cond_groups.splice(0, 0, itemData)
         this.conditionList[count].disp_serial = count
         this.conditionList[count].cond_groups[0].disp_serial = this.conditionList[count].cond_groups.length - 1
         count++
       } else {
         Msg.alert('最多只能添加三行！')
       }
      },
      // 切换外层的且 / 或
      toggle () {
        if (this.groupBtnVal === this.data.B010006[0]) {
          this.groupBtnVal = this.data.B010006[1]
        } else {
          this.groupBtnVal = this.data.B010006[0]
        }
      },
      // 事件选择
      changeEvent (obj) {
        this.cond_arr1.forEach(item => {
          if (item.meta_id === obj.meta_id) {
            if (item.data_type === 'text') {
              this.cond_arr2 = this.data.B010003
              obj.vs_data_type = 'text'
              obj.vs_code = 'B010003'
            } else if (item.data_type === 'number') {
              this.cond_arr2 = this.data.B010004
              obj.vs_data_type = 'number'
              obj.vs_code = 'B010004'
            } else if (item.data_type === 'date') {
              this.cond_arr2 = this.data.B010005
              obj.vs_data_type = 'date'
              obj.vs_code = 'B010005'
            }
          }
        })
      },
      // 属性选择
      changeAttr (obj) {
        obj.cond_fmt = `${obj.vs_code}#${obj.vs_code_value}`
      },
      // 删除一行
      remove_cond (index, ind) {
        if (this.conditionList.length === 1) {
          if (this.conditionList[index].cond_groups.length === 1) {
            this.conditionList.splice(index, 1)
          } else {
            if (ind === 0) {
              this.conditionList[index].cond_groups.splice(ind, 1)
              this.conditionList[index].cond_groups[ind].cond_link = ''
            } else {
              this.conditionList[index].cond_groups.splice(ind, 1)
            }
          }
        } else {
          if (this.conditionList[index].cond_groups.length === 1) {
            this.conditionList.splice(index, 1)
          } else {
            if (ind === 0) {
              this.conditionList[index].cond_groups.splice(ind, 1)
              this.conditionList[index].cond_groups[ind].cond_link = ''
            } else {
              this.conditionList[index].cond_groups.splice(ind, 1)
            }
          }
        }
      },
      // 添加一行
      addRow (group, ind) {
        if (group.cond_groups.length < 3) {
          let itemData = {
            vs_data_type: '',
            vs_code: '',
            vs_code_value: '',
            vs_bool_code: 'B010006',
            vs_bool_code_value: this.data.B010006[0].code_value,
            meta_id: null,
            disp_serial: ind + 1,
            cond_link: '',
            cond_fmt: '',
            cond_value: []
          }
          itemData.cond_link = `${itemData.vs_bool_code}#${itemData.vs_bool_code_value}`
          group.cond_groups.splice(ind + 1, 0, itemData)
        } else {
          Msg.alert('最多只能添加三行！')
        }
      },
      // 添加初始事件或后续事件
      add_event (ind, num) {
        if (this.w_list[num].cond_groups.length < 3) {
          if (num === 0) {
            const itemData = {
              meta_id: '',
              disp_serial: '',
              cond_link: '',
              cond_fmt: '',
              cond_value: []
            }
            this.w_list[num].cond_groups.splice(ind + 1, 0, itemData)
          } else {
            const itemData = {
              meta_id: '',
              disp_serial: '',
              cond_link: '',
              cond_fmt: '',
              cond_value: []
            }
            this.w_list[num].cond_groups.splice(ind + 1, 0, itemData)
          }
        } else {
          Msg.alert('最多只能添加三行！')
        }
      },
      // 删除初始事件或后续事件
      remove_event (ind, num) {
        if (num === 0) {
          this.w_list[num].cond_groups.splice(ind, 1)
        } else {
          this.w_list[num].cond_groups.splice(ind, 1)
        }
      },
      // 切换行与行之间的 且 / 或
      toggleRelationship (item) {
        if (item.vs_bool_code_value === 'and') {
          item.vs_bool_code_value = 'or'
        } else {
          item.vs_bool_code_value = 'and'
        }
        item.cond_link = `${item.vs_bool_code}#${item.vs_bool_code_value}`
      },
      // 获取日期
      getDate (list) {
        if (list) {
          let timeValue = new Date(list[1]).getTime() - new Date(list[0]).getTime()
          let day = timeValue / 1000 / 60 / 60 / 24 + 1
          if (day > 7) {
            Msg.alert('选择天数不能大于7天')
            this.dates = [new Date(), new Date()]
          }
          this.from_date = getDateTime(list[0], 's')
          this.to_date = getDateTime(list[1], 's')
        } else {
          this.from_date = ''
          this.to_date = ''
        }
      },
      cancelEven () { // 重置
        this.dates = [] // 时间
        this.from_date = ''
        this.to_date = ''
        this.userGroup = '' // 用户分群
        this.w_list = [
          {
            event_id: '',
            cond_groups: [
              {
                meta_id: '',
                cond_fmt: '',
                cond_value: []
              }
            ]
          },
          {
            event_id: '',
            cond_groups: [
              {
                meta_id: '',
                cond_fmt: '',
                cond_value: []
              }
            ]
          }
        ] // 初始事件和后续事件
        this.conditionList = [] // 事件筛选条件
        this.option.series = [] // 清空echart
        this.tflag = false // 隐藏table
      },
      // 查看结果
      search () {
        if (!this.from_date || !this.to_date) {
          Msg.alert('请选择日期')
          return
        }
        let message = {
          analyse_type: this.analyse_type,
          user_group: this.userGroup, // 用户分群
          start_event: this.w_list[0], // 初始事件
          end_event: this.w_list[1], // 后续事件
          // g_list: this.groupVal, // 分组
          w_list: this.conditionList, // 事件筛选
          from_date: this.from_date,
          to_date: this.to_date
        }
        ajax.post(api.ANALYSESEARCHOBJECT, message).then(res => {
          this.downloadData = res.data.rows
          this.tableData = res.data.rows
          this.tableDataUser = res.data.rows[0].cells
          let arr = ['初始用户人数']
          for (var i = 0; i < this.tableDataUser.length; i++) {
            arr.push(i + 1 + '天后')
          }
          // 横坐标天数
          this.option.xAxis.data = arr
          let dataList = []
          let titleList = []
          this.tableData.forEach(item => {
            titleList.push(item.by_value)
            let obj = {}
            obj.type = 'line'
            obj.name = item.by_value
            obj.data = []
            obj.data.push(item.total_people)
            item.cells.forEach(o => {
              obj.data.push(o.people)
            })
            dataList.push(obj)
          })
          if (this.tableData.length) {
            this.tflag = true
            // 表头时间
            this.option.legend.data = titleList
            // 把数据渲染到
            this.option.series = dataList
          } else {
            this.tflag = false
            Msg.alert('暂时没有数据')
          }
        })
      },
      // 判断条件
      getBool_1 (item) {
        const type = item.vs_data_type
        const value = item.vs_code_value
        if (type === 'number' && value > 0 && value < 9) { // 1-8
          return true
        } else if (type === 'text' && value > 0 && value < 11) { // 1-10
          return true
        } else if (type === 'date' && value > 0 && value < 11) { // 1-10
          return true
        }
      },
      getBool_2 (item) {
        if (item.vs_data_type === 'date' && item.vs_code_value === '15') {
          return true
        }
      },
      getBool_3 (item) {
        if (item.vs_data_type === 'number' && item.vs_code_value === '11') {
          return true
        }
      },
      getBool_4 (item) {
        return false
      },
      // 事件选择
      changeEvents (obj) {
        this.cond_arr3.forEach(item => {
          if (item.meta_id === obj.meta_id) {
            if (item.data_type === 'text') {
              this.cond_arr4 = this.data.B010003
              obj.vs_data_type = 'text'
              obj.vs_code = 'B010003'
            } else if (item.data_type === 'number') {
              this.cond_arr4 = this.data.B010004
              obj.vs_data_type = 'number'
              obj.vs_code = 'B010004'
            } else if (item.data_type === 'date') {
              this.cond_arr4 = this.data.B010005
              obj.vs_data_type = 'date'
              obj.vs_code = 'B010005'
            }
          }
        })
      },
      // 区间日期改变事件
      change (item) {
        if (item.vs_date_value) {
          item.vs_date_value.forEach((val, key) => {
            item.cond_value[key] = getDateTime(val, 's')
          })
        }
      }
    },
    created () {
      this.dates = [new Date(), new Date()]
      this.from_date = getDateTime(new Date(), 's')
      this.to_date = getDateTime(new Date(), 's')
      // 用户分群列表
      ajax.post(api.SELECTUSERGROUPLIST).then(res => {
        this.groupList = res.data
      })
      this.data = JSON.parse(sessionStorage.getItem('commonData'))
      this.event_list = this.data.B020002 // 初始事件和后续事件
      this.groupBtnVal = this.data.B010006[0]
      this.cond_arr3 = this.data.META_COLUME // 事件筛选
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  #retained-analysis
    height 100%
    .box
      height calc(100% - 56px)
      padding 10px 0 10px 10px
      .box-con
        padding-right 10px
        height 100%
        overflow auto
    .retention-conditions
      .tags-conditions > div
        line-height 50px
        padding 0 20px
      .tags
        height 51px
        line-height 50px
        padding: 0 20px
      .conditions
        font-size 0
        span.font12
          display inline-block
          width 80px
          margin-right 5px
      .time-screening
        border-bottom 1px solid #D8DCE5
        .title
          height 30px
          line-height 30px
          padding 0 20px
          color #8BC4FF
          position relative
          i.iconfont
            font-size 10px
        .title:after
          content ''
          display inline-block
          width calc(100% - 110px)
          height 2px
          background #8BC4FF
          position absolute
          top 14px
          left 90px
        & > div
          overflow hidden
          height 50px
          line-height 50px
          padding 0 20px
          font-size 0
          color #5A5E66
          & > span:first-child
            display inline-block
            width 80px
            height 30px
            margin-right 5px
            font-size 12px
          span.lf:last-child
            margin-left 10px
          .show
            margin-right 10px
          i.iconfont
            font-size 14px
            margin 0 5px 0 5px
            color #D8DCE5
          i.iconfont:hover
            color #016DFB
        .date-time
          padding-top 5px
      /*筛选条件 start*/
      .filter-conditions
        padding 30px 20px 20px 30px
        .conditions-list:before
          content ''
          width 0
          height calc(100% - 20px)
          border-left 1px solid #D8DCE5
          position absolute
          left 15px
          top 10px
        .conditions-list
          padding-left 40px
          position relative
          .el-input__inner
            font-size 12px
          .group-btn
            position absolute
            left 0
            top 50%
            margin-top -15px
          .condition-group-list
            .group-head
              height 50px
            .condition-group
              & > div
                height 50px
                line-height 50px
                padding-left 10px
              .item-btn
                position relative
                .v-button
                  position absolute
              .condition-group-item
                // background #f4f4f5
                overflow hidden
                & > .el-input
                  width 120px
                .date-time
                  padding-left 10px
                  .el-date-editor
                    position relative
                    margin 0 10px
                    padding-top 0px
                    .el-range__icon
                      line-height 25px
                    .el-range-input, .el-range-separator
                      position relative
                    .el-range-separator
                      padding 0
                      font-size 12px
                .amount-range
                  padding-left 10px
                  .el-input
                    margin 0 8px
                .v-select-checkbox
                  margin-left 10px
                .icons-list
                  margin-left 15px
                  i.iconfont
                    font-size 14px
                    margin-right 10px
                    color #D8DCE5
                  i.iconfont:hover
                    color #016DFB
    /*筛选条件 end*/
    .add-condition
      width 150px
      height 50px
      line-height 50px
      padding 0 20px 0 30px
      cursor pointer
      .el-button
        width 30px
        height 30px
        display inline-block
        padding 0
        .el-icon-plus
          font-size 16px
          font-weight bold
      span
        font-size 12px
        color #016DFB
        margin-left 10px
    .examine
      height 30px
      line-height 30px
      padding 0 20px
      margin-top 30px
      .btns
        width 144px
        .el-button
          display inline-block
          width 65px
          height 30px
          line-height 0
    /*筛选条件 end*/
    .all-users
      color #5A5E66
      margin-top 10px
      padding 20px
      .font16
        text-align center
      h6.font16
        color #6C7079
      .conditions
        height 30px
        line-height 30px
        margin 20px 0
        .el-date-editor--daterange
          height 30px
        div.rf
          .el-checkbox
            margin-right 20px
            .el-checkbox__label
              font-size 12px
          .el-dropdown
            display inline-block
            width 80px
            height 30px
            line-height 30px
            text-align center
            border 1px solid #D8DCE5
            font-size 12px
          .el-dropdown:nth-child(3)
            border-top-left-radius 4px
            border-bottom-left-radius 4px
          .el-dropdown:nth-child(4)
            border-left transparent
            border-right transparent
          .el-dropdown:nth-child(5)
            border-top-right-radius 4px
            border-bottom-right-radius 4px
      .sex-color
        width 180px
        margin 30px auto
        i
          display inline-block
          width 13px
          height 13px
          border-radius 50%
        span
          display inline-block
          width 25px
          height auto
          text-align center
          margin-top 5px
        span:nth-child(2)
          margin 0 50px
        span:nth-child(6)
          margin 0 50px
    .clear
      clear both
    .initial-user
      overflow-y auto
      .table-rows
        border: 1px solid #D8DCE5
        border-collapse collapse
        text-align center
        color #5A5E66
        margin 20px 0
        th
          font-weight normal
          border-left 1px solid #D8DCE5
          border-top 1px solid #D8DCE5
          height 50px
          font-size 14px
          background-color #f4f4f5
        tr td:last-child
          border-right 1px solid #D8DCE5
          border-bottom 1px solid #D8DCE5
        td
          border-left 1px solid #D8DCE5
          border-top 1px solid #D8DCE5
          height 50px
          padding 0 20px
          font-size 12px
          .blue-color
            color #016DFB
        .el-progress__text
          font-size 12px
    .barEcharts
      .echarts
        position static
        width 100%
</style>
